<!-- 头像 -->
<template>
  <view
    class="aster-avatar"
    :class="[`aster-avatar--${props.shape}`]"
    :style="{
      backgroundColor: props.text || props.icon ? props.bgColor : 'transparent',
      width: addUnit(props.size),
      height: addUnit(props.size),
    }"
    @tap="clickHandler"
  >
    <slot>
      <i
        v-if="props.icon"
        :class="props.icon"
        :style="{ fontSize: props.fontSize, color: props.color }"
      ></i>
      <text
        v-else-if="props.text"
        :style="{
          fontSize: props.fontSize,
          color: props.color,
          justifyContent: 'center',
          alignItems: 'center',
        }"
      >
        {{ props.text }}</text
      >
      <image
        class="aster-avatar__image"
        v-else
        :class="[`aster-avatar__image--${shape}`]"
        :src="avatarUrl || defaultUrl"
        :mode="props.shape"
        @error="errorHandler"
        :style="{
          width: addUnit(size),
          height: addUnit(size),
        }"
      />
    </slot>
  </view>
</template>
<script setup lang="ts">
  import { PropType, ref, watchEffect } from 'vue';
  import { addUnit } from '@/utils';

  const base64Avatar =
    '';

  const emits = defineEmits(['click']);
  const props = defineProps({
    // 头像图片路径(不能为相对路径)
    src: {
      type: String,
      default: '',
    },
    // 头像形状，circle-圆形，square-方形
    shape: {
      type: String as PropType<'circle' | 'square'>,
      default: 'circle',
    },
    // 头像尺寸
    size: {
      type: [String, Number],
      default: 40,
    },
    // 显示的文字
    text: {
      type: String,
      default: '',
    },
    // 背景色
    bgColor: {
      type: String,
      default: '#c0c4cc',
    },
    // 文字颜色
    color: {
      type: String,
      default: '#ffffff',
    },
    // 文字大小
    fontSize: {
      type: [String, Number],
      default: 18,
    },
    // 显示的图标
    icon: {
      type: String,
      default: '',
    },
    // 加载失败的默认头像(组件有内置默认图片)
    defaultUrl: {
      type: String,
      default: '',
    },
    // 组件标识符
    name: {
      type: String,
      default: 'level',
    },
  });

  const avatarUrl = ref(props.src);

  const errorHandler = () => {
    avatarUrl.value = props.defaultUrl || base64Avatar;
  };

  const clickHandler = () => {
    emits('click', props.name);
  };

  watchEffect(() => {
    avatarUrl.value = props.src;
    if (!props.src) {
      errorHandler();
    }
  });
</script>
<style scoped lang="scss">
  view,
  scroll-view,
  swiper-item {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    align-items: stretch;
    align-content: flex-start;
  }
  .aster-avatar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    &--circle {
      border-radius: 100px;
    }

    &--square {
      border-radius: 4px;
    }

    &__image {
      &--circle {
        border-radius: 100px;
      }

      &--square {
        border-radius: 4px;
      }
    }
  }
</style>
